<template>
  <div class="zxNavigationPageDetail">
    <div class="zxPageHeader">
      <em class="iconfont icon-zuojiantou" @click="backLastPage"/>
      <div class="zxPageHeaderTitle">
        <div class="zxPageHeader_h2">
          <h2 style="font-size: 22px; margin-left: -10px">
            <span style="width: 60%" @click="clickHeadTitle()">{{ zxHeadTitle }}<div class="markTriangle"></div></span>
          </h2>
          <template v-if="showTitleSelect">
            <div class="background_color" @click="closeLi()">

            </div>
            <div class="titleLi" tabindex="0">
              <ul>
                <li v-for="(item, index) in this.titleList" :key="item.category">
                  <span @click="changeLevel1Title(index, item.label, item.category)">{{ item.label }}</span>
                </li>
              </ul>
            </div>
          </template>

        </div>
      </div>



      <div class="zxPageHeaderTitle1">
        <div class="zxPageHeaderTitle1_div">
          <span :class="level1TitleIndex === index ? 'chooseLevel1Title' : ''"
                v-for="(level1Title,index) in level1TitleList"
                :key="index"
                @click="queryNextSubjects(level1Title, index)">
          {{ level1Title }}
          </span>
        </div>

      </div>

    </div>

    <div class="zxPageHeaderTitle2"  v-if="level2TitleList.length > 0">
      <div class="zxPageHeaderTitle2_div">
        <span :class="level2TitleIndex === index ? 'chooseLevel2Title' : ''"
              v-for="(level2Title, index) in level2TitleList"
              :key="level2Title.id"
              @click="queryNextSubjectsByLevel2Title(level2Title.subjectName, level2Title.category, index)">
        {{ level2Title.subjectName }}
        </span>
      </div>

    </div>
    <template v-if="showDetail">
      <div class="zxZheZhao" v-if="showDetail" @click="zxBackBtn"></div>
      <div class="zxDetailsPage">
        <div class="zxDetails">
          <div class="zxDetails_content">
            <template v-if="ansContentName">
              <h2>{{ question }}</h2>
              <em class="iconfont icon-fujian"/>
              <span
                @click="downloadDetailFile()">
              {{ ansContentName }}
            </span>
            </template>

            <template v-else>
              <h2>{{ question }}</h2>
              <template v-if="newPageUrl">
                <span @click="jumpUrl()" v-html="ansContent"></span>
              </template>
              <template v-else>
                <span style="margin-left: 1.5em" v-html="ansContent"></span>
              </template>

            </template>

          </div>
          <button class="zxDetails_back" @click="zxBackBtn">返回</button>
        </div>
      </div>


    </template>
    <template v-else>
      <div class="zxPageContent">
        <ul>
          <li v-for="(qaBank,index) in qaBankData.data" @click="showDetailPage(qaBank)" :key="index">

            <template v-if="checkAnsContentName(qaBank.ansContentName)">
              <span>{{ qaBank.ansContent }}</span>
            </template>

            <template v-else>
              <span>{{ qaBank.question }}</span>
            </template>

            <template v-if="showHr">
              <hr/>
            </template>
            <template v-else>
              <hr style="visibility: hidden" />
            </template>
          </li>
        </ul>
        <br/><br/><br/><br/><br/>
      </div>

    </template>


  </div>

</template>

<script>
import {isNotEmpty} from "@/common/util";
import API from '@/api/api-chat-list.js'
import qs from "qs";
import AesGcm from "@/utils/aesgcm";
import {extractUrlFromHtml} from "@/utils/extractFromHtml";

export default {
  name: "ZxNavigationPageDetail",
  props: ['answerData'],
  data() {
    return {
      "categoryList": [],
      "categoryListData": {},
      "msg": {},
      "titleList": [], // 标题列表
      "level1TitleList": [], // 一级标题列表
      "level2TitleList": [], // 二级标题列表
      "qaBankData": {}, // 标题对应内容详细信息
      "level1TitleIndex": 0,
      "level2TitleIndex": 0,
      "chooseTitleCategory": this.$store.state.zxInitCategory, // 当前选中的主标题
      "showDetail": false, // 显示详细信息
      "ansContentName": null, // 内容名称
      "ansContentNameId": {}, // 内容id值
      "interfaceURL": AesGcm.decrypt(process.env.VUE_APP_INTERFACE_URL) + '/api/downloadFile.ajax/file.file?',
      "qaBankId": null,
      "piid": null,
      "question": null,
      "ansContent": null,
      "newPageUrl": null,
      "showTitleSelect": false,
      "zxHeadTitle": null, // 主标题名称
      "categoryValue": null,
      "showHr": true
    }
  },
  created() {
    // 关闭详情页面
    this.showDetail = false;

    this.ansContentName = null;
    this.msg = this.$store.state.quickNavListData;
    this.categoryListData = this.$store.state.categoryLists;
    this.unique(this.$store.state.quickNavListData.data.data);
    let temp = [];

    // 处理整合标题数据存入titleList
    const titleList = [];
    this.categoryListData.data.forEach(title => {

      this.msg.data.data.forEach(item2 => {
        if (title.key === item2.category) {
          temp.push({'key': title.key, 'label': item2.level1Title});
        }
      })

      this.categoryList.forEach(items => {
        if (title.key === items.category) {
          const level1TitleList = [];
          this.msg.data.data.forEach(item => {
            if (item.category === items.category) {
              level1TitleList.push(item.level1Title);
            }
          });

          titleList.push({'category': items.category, 'label': title.label, 'level1TitleList': level1TitleList});
        }
      });
    });

    this.$store.state.levelTitleList = temp;

    this.titleList = titleList;

    // 自动选中对应的主标题，并获取对应的一级标题
    let titleListIndex = null;
    this.titleList.forEach((item, index) => {
      if (item.category === this.$store.state.zxInitCategory) {
        titleListIndex = index;
        this.zxHeadTitle = item.label;
        this.categoryValue = item.category;
      }
    })
    this.level1TitleList = isNotEmpty(titleList) ? titleList[titleListIndex].level1TitleList : [];

    // 自动选中对应的一级标题
    this.level1TitleList.map((level1Title, index) => {
      if (level1Title === this.$store.state.zxInitLevel1Title) {
        this.level1TitleIndex = index;
      }
    })

    this.queryNextSubjects(this.$store.state.zxInitLevel1Title, this.level1TitleIndex, this.$store.state.zxInitCategory);
  },
  methods: {
    backLastPage() {
      this.$router.back();
    },
    unique(array) {
      const res = new Map();
      this.categoryList = array.filter((arr) => !res.has(arr.category) && res.set(arr.category, 1));
    },
    async queryNextSubjects(zxTitle, index, category) {
      // 关闭详情页面
      this.showDetail = false;

      this.ansContentName = null;

      category = category ? category : this.categoryValue;

      this.level1TitleIndex = index;
      this.level2TitleIndex = 0;

      const param = {
        'subjectName': zxTitle,
        'category': category
      }
      const nextSubjects = await API.queryNextSubjects(param);

      // 判断是否显示下一级标题
      if (isNotEmpty(nextSubjects.data)) {
        this.level2TitleList = nextSubjects.data;
        category = this.level2TitleList[0].category;
        zxTitle = this.level2TitleList[0].subjectName;
      } else {
        this.level2TitleList = [];
      }

      const paramQaBank = {
        'category': category,
        'level1Title': zxTitle,
        'level2Title': zxTitle,
        'level3Title': zxTitle,
      }
      this.qaBankData = await API.queryQaBankBySubject(paramQaBank);
    },
    clickHeadTitle() {
      this.showTitleSelect = true;
      this.showHr = false;
    },
    // 选择主标题，一级标题变动
    async changeLevel1Title(index, title, category) {
      this.level1TitleList = this.titleList[index].level1TitleList;

      // 主标题名称
      this.zxHeadTitle = title;
      this.showTitleSelect = false;
      this.categoryValue = category;

      this.showHr = true;

      // 默认选中第一个一级标题
      this.level1TitleIndex = 0;

      const zxTitle = this.level1TitleList[0];

      // 二级标题判断
      await this.queryNextSubjects(zxTitle, 0, this.categoryValue);
    },
    async queryNextSubjectsByLevel2Title(zxTitle, category, index) {
      // 关闭详情页面
      this.showDetail = false;

      this.ansContentName = null;

      this.level2TitleIndex = index;

      const paramQaBank = {
        'category': category,
        'level1Title': zxTitle,
        'level2Title': zxTitle,
        'level3Title': zxTitle,
      }
      this.qaBankData = await API.queryQaBankBySubject(paramQaBank);
    },
    /**
     * 判断ansContentName和ansContentName.file的值是否为空
     * @param ansContentName
     * @returns {*}
     */
    checkAnsContentName(ansContentName) {
      return ansContentName && Object.keys(JSON.parse(ansContentName).file).length > 0;
    },
    /**
     *
     * @param qaBank
     */
    showDetailPage(qaBank) {

      this.checkAnsContentName(qaBank.ansContentName) ? this.showQaBankDetail(qaBank.ansContentName, qaBank.id, qaBank.bankId, qaBank.question)
        : this.showQuestionDetail(qaBank)
    },
    showQaBankDetail(ansContentName, qaBankId, piid, question) {
      this.showDetail = true;
      this.question = question;
      const ansContentNameMap = JSON.parse(ansContentName);
      for (const key in ansContentNameMap.file) {
        this.ansContentNameId = key;
        this.ansContentName = ansContentNameMap.file[key];
        this.qaBankId = qaBankId;
        this.piid = piid;
      }
    },
    showQuestionDetail(qaBank) {
      this.newPageUrl = qaBank.description ? qaBank.description
        : extractUrlFromHtml(qaBank.moaRichText);
      if (this.newPageUrl?.startsWith("https://") || this.newPageUrl?.startsWith("http://")) {
        this.jumpUrl();
        return;
      }
      this.showDetail = true;
      this.question = qaBank.question;
      this.newPageUrl = qaBank.description ? qaBank.description
        : extractUrlFromHtml(qaBank.moaRichText);
      this.ansContent = qaBank.ansContent;
    },
    downloadDetailFile() {
      const param = qs.stringify({
        'fileId': this.ansContentNameId,
        'qaBankId': this.qaBankId,
        'piid': this.piid,
        'type': 'file'
      })
      MXCommon.download(this.interfaceURL + param);  //下载文件
    },
    zxBackBtn() {
      this.showDetail = false;
      this.ansContentName = null;
    },
    jumpUrl() {
      MXCommon.openUrlPage(this.newPageUrl);
    },
    closeLi() {
      this.showTitleSelect = false;
      this.showHr = true;
    }
  }
}
</script>

<style type="text/css">
.zxNavigationPageDetail{
  overflow: hidden;
}
.zxNavigationPageDetail .zxPageHeader {
  height: 95px;
  margin-bottom: 50px;
  background-color: red;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.zxNavigationPageDetail .zxPageHeaderTitle {
  display: flex;
  padding: 20px 0;
  width: 100%;
  color: white;
  font-size: 100%;
  background-color: #F33622;
}

.zxNavigationPageDetail .zxPageHeader_h2 {
  width: 100%;
  text-align: center;
  height: 22px;
}

.zxNavigationPageDetail .zxPageHeader_h2 select {
  font-size: 22px;
  font-weight: bold;
  border: none;
  background-color: #F33622;
  color: white;
  margin-right: 20px;
}

.zxNavigationPageDetail .zxPageHeader_h2 select:focus-visible {
  outline: none;
}

.zxNavigationPageDetail .zxPageHeaderTitle1 .zxPageHeaderTitle1_div {
  border: 1px solid #e3e3e3;
  border-radius: 13px;
  box-shadow: 0 2px 5px #e3e3e3;

  padding: 17px 10px;
  text-align: center;
  margin-left: 2%;
  background-color: white;

  width: 90%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.zxNavigationPageDetail .zxPageHeaderTitle1 .zxPageHeaderTitle1_div::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.zxNavigationPageDetail .zxPageHeaderTitle2 {
  margin-top: -60px;
}

.zxNavigationPageDetail .zxPageHeaderTitle2 .zxPageHeaderTitle2_div::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.zxNavigationPageDetail .zxPageHeaderTitle2 .zxPageHeaderTitle2_div {
  border-bottom: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  box-shadow: 0 4px 5px #e3e3e3;
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;

  margin: 5px 2%;
  padding: 45px 10px 15px 10px;
  text-align: center;

  width: 90%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.zxNavigationPageDetail .zxPageHeaderTitle1::-webkit-scrollbar {
  display: none;
}

.zxNavigationPageDetail .zxPageHeaderTitle2::-webkit-scrollbar {
  display: none;
}

.zxNavigationPageDetail .zxPageHeaderTitle1 span {
  font-size: 16px;
  margin: 0 10px;
}

.zxNavigationPageDetail .zxPageHeaderTitle1 .chooseLevel1Title {
  font-size: 16px;
  margin: 0 10px;
  border-bottom: 4px;
  border-color: #F33622;
  border-bottom-style: solid;
  padding-bottom: 11px;
}


.zxNavigationPageDetail .zxPageHeaderTitle2 span {
  font-size: 16px;
  margin: 0 5px;
  padding: 3px 7px;
  border: white solid 1px;
  border-radius: 12px;
  color: #737373;
}

.zxNavigationPageDetail .zxPageHeaderTitle2 .chooseLevel2Title {
  border: red solid 1px;
  color: white;
  background-color: #F33622;
}

.zxNavigationPageDetail .titleLi {
  position: fixed;
  height: 22px;
  width: 40%;
  margin-top: -300px;
  margin-left: 110px;
  top: 350px;
  opacity: 1;
  z-index: 999;
}

.zxNavigationPageDetail .titleLi ul {
  background-color: #F33622;
  border: 1px #e3e3e3 solid;
  box-shadow: 0 2px 5px #e3e3e3;
  border-radius: 15px;
  padding: 15px 10px;
  opacity: 1;
}

.zxNavigationPageDetail .titleLi li span {
  font-size: 22px;
  line-height: 40px;
  font-weight: bold;
}

.zxNavigationPageDetail .background_color {
  width: 400px;
  height: 1000px;
  margin-left: -10px;
  position: fixed;
  z-index: 900;
  margin-top: -70px;
  background-color: black;
  opacity: 0.2;
}

.markTriangle {
  position: relative;
  top: -20px;
  margin-left: 255px;
  width: 10px;
  height: 10px;
  border: white solid;
  border-width: 3px 3px 0 0;
  transform: rotate(135deg);
  margin-bottom: 10px;
}

  /** content部分 */
.zxNavigationPageDetail .zxPageContent {
  margin-top: 20px;
  overflow: auto;
  height: 640px;
  -webkit-overflow-scrolling: touch;
}

.zxNavigationPageDetail .zxZheZhao {
  position: absolute;
  top: -50px;
  background-color: black;
  height: 422px;
  width: 100%;
  opacity: 0.2;
}

.zxNavigationPageDetail .zxDetailsPage {
  background-color: #cccccc;
  position: absolute;
  width: 100%;
  bottom: 0;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}

.zxNavigationPageDetail .zxDetails {
  padding: 0 20px;
  line-height: 20px;
  opacity: 1;
  height: 570px;
  background-color: white;

  box-shadow: 0 2px 7px #e3e3e3;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border: 1px none #e3e3e3;
  border-top-style: solid;
}

.zxNavigationPageDetail .icon-fujian:before {
  content: "\e600";
  color: #9B9B9C;
}

.zxNavigationPageDetail .zxDetails_back {
  position: absolute;
  bottom: 40px;
  left: 37%;
  padding: 5px 30px;
  border: 1px solid red;
  background-color: red;
  color: white;
  border-radius: 7px;
  font-size: 16px;
}

.zxNavigationPageDetail .zxDetails_content {
  margin-top: 30px;
}

.zxNavigationPageDetail .zxDetails_content h2 {
  padding-bottom: 20px;
}

.zxNavigationPageDetail .zxDetails_content span {
  line-height: 23px;
}

.zxNavigationPageDetail .zxPageContent li {
  margin: 10px 20px 10px 35px;
  line-height: 23px;
  list-style-type: disc;

}

.zxNavigationPageDetail .zxPageContent li::marker {
  color: red;
}
.zxNavigationPageDetail .zxPageContent li hr {
  border: none;
  border-bottom: 1px solid #DaDaDa;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  width: 100%;
  margin-left: -15px;
}

.zxNavigationPageDetail .icon-zuojiantou {
  font-size: 22px;
  position: absolute;
  left: 0.5em;
  top: 20px;
  color: white;
}
</style>
